<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.webcam.min.js"></script>

    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            font-family: "Microsoft YaHei";
        }
        #webcam_box{
            width: 800px;
            height: 600px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -400px;
            margin-top: -300px;
            border-radius: 3px;
            -webkit-box-shadow: 0 0 30px #000;
            box-shadow: 0 0 30px #000;
            display: none;
        }
        #webcam_box .webcon{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        #webcam_box .toolbar{
            width: 100%;
            height: 30px;
            background-color: #000;
            opacity: 0.4;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
            text-align: right;
           position: absolute;
           top: 0;
           left: 0;
           z-index: 30;
        }
         #webcam_box .toolbar span{
             display: inline-block;
             width: 30px;
             height: 30px;
             line-height: 30px;
             text-align: center;
             vertical-align: middle;
             font-family: "Microsoft YaHei";
             font-size: 22px;
             color: #fff;
             cursor: pointer;
         }
          #webcam_box .toolbar span:hover{
              color: #f00;
          }

          #function{
              width: 50px;
              position: absolute;
              right: 0;
              top: 50%;
              margin-top: -25px;
          }
           #function li{
                height: 50px;
                background-color: #363C40;
                cursor: pointer;
                text-align: center;
                vertical-align: middle;
                color: #fff;
                font-size: 12px;
           }
           #function li:hover{
               background-color: #f01400;
           }
            #function li .icon-chat{
                margin-left: 10px;
                padding-top: 4px;
                display: block;
                width: 30px;
                height: 30px;
                background: url(images/chat.png) center center no-repeat;
           }

           #chat_text{
               width: 300px;
               height: 100%;
               position: absolute;
               top: 0;
               right: 0;
               background-color: #786234;
               display: none;
                color: #fff;
           }
           #chat_content{
               margin: 0 20px;
               padding-top: 20px;
           }
           .chat_con h2{
               margin-top: 40px;
               text-align: center;
               color: #fff;
           }
           .username{
               color: #066534;
               font-weight: bold;
               margin-right: 10px;
           }
           .msg{
               color: #fff;
           }
           .input_text{
               width: 100%;
               height: 50px;
               position: absolute;
               bottom: 0;
               right: 0;
               background-color: #f01400;
               
           }
           .input_text input{
               width: 200px;
               height: 30px;
               line-height: 30px;
               padding-left: 15px;
               border-radius: 4px;
               border: none;
               margin-top: 10px;
               margin-left: 10px;
           }
           .input_text span{
               display: inline-block;
               width: 50px;
               height: 30px;
               text-align: center;
               line-height: 30px;
               cursor: text;
               border-radius: 4px;
               border: 1px solid #fff;
               cursor: pointer;
           }
           .input_text span:hover{
               background-color: #fff;
               color: #f01400;
           }
    </style>
</head>
<body>
    <div id="webcam_box">
        <div class="webcon">
            <div class="toolbar">
            <span id="close_webcam">x</span>
        </div>
        <div id="webcam"></div>

        <ul id="function">
            <li>
                <i class="icon-chat"></i>
                <span>交流</span>
            </li>
        </ul>

        <ul id="chat_text">
            <li class="chat_con">
                <h2>文字交流</h2>
                <ul id="chat_content">
                    <li>
                        <span class="username">邓红：</span><span class="msg">老师你好！</span>
                    </li>
                </ul>

                <div class="input_text">
                    <input type="text" id="input_text">
                    <span id="chat_submit">提交</span>
                </div>
            </li>
        </ul>
        </div>
    </div>

    <botton id="btn">wer</botton>
<script src="js/webcan.js"></script>
</body>
</html>